<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="topbar safe-area-top">
			<text class="title elderly-text-large">健康提醒</text>
			<view class="add-btn elderly-pressable" @tap="handleAddReminder">
				<text class="add-icon">➕</text>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<scroll-view 
			class="main-content" 
			scroll-y 
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="handleRefresh"
		>
			<!-- 今日提醒概览 -->
			<view class="overview-card fade-in">
				<view class="overview-header">
					<text class="overview-title elderly-text-large">今日提醒</text>
					<text class="overview-date elderly-text">{{todayDate}}</text>
				</view>
				<view class="overview-stats">
					<view class="stat-item">
						<text class="stat-number elderly-text-large">{{todayReminders.completed}}</text>
						<text class="stat-label elderly-text">已完成</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-number elderly-text-large">{{todayReminders.total}}</text>
						<text class="stat-label elderly-text">总计</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-number elderly-text-large">{{todayReminders.pending}}</text>
						<text class="stat-label elderly-text">待完成</text>
					</view>
				</view>
			</view>

			<!-- 健康知识卡片 -->
			<view class="knowledge-card interactive">
				<view class="knowledge-header">
					<text class="knowledge-title elderly-text-large">💡 今日健康小贴士</text>
					<view class="refresh-btn elderly-pressable" @tap="refreshKnowledge">
						<text class="refresh-icon">🔄</text>
					</view>
				</view>
				<text class="knowledge-content elderly-text">{{dailyKnowledge.content}}</text>
				<text class="knowledge-source elderly-text">来源：{{dailyKnowledge.source}}</text>
			</view>

			<!-- 提醒列表 -->
			<view class="reminders-section">
				<text class="section-title elderly-text-large">我的提醒</text>
				<view class="reminders-list">
					<view 
						class="reminder-card interactive slide-up" 
						v-for="(reminder, index) in remindersList" 
						:key="reminder.id"
						:style="{ animationDelay: (index * 0.1) + 's' }"
						:class="{ completed: reminder.completed }"
					>
						<view class="reminder-content">
							<view class="reminder-header">
								<view class="reminder-icon" :style="{ background: reminder.color }">
									<text class="icon">{{reminder.icon}}</text>
								</view>
								<view class="reminder-info">
									<text class="reminder-title elderly-text">{{reminder.title}}</text>
									<text class="reminder-time elderly-text">{{reminder.time}}</text>
								</view>
								<view class="reminder-actions">
									<view 
										class="action-btn elderly-pressable" 
										@tap="toggleReminder(reminder)"
									>
										<text class="action-icon">{{reminder.completed ? '✅' : '⭕'}}</text>
									</view>
									<view 
										class="action-btn elderly-pressable" 
										@tap="editReminder(reminder)"
									>
										<text class="action-icon">✏️</text>
									</view>
								</view>
							</view>
							<text class="reminder-desc elderly-text" v-if="reminder.description">{{reminder.description}}</text>
							<view class="reminder-tags" v-if="reminder.tags && reminder.tags.length > 0">
								<text 
									class="tag elderly-text" 
									v-for="tag in reminder.tags" 
									:key="tag"
								>{{tag}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 添加提醒弹窗 -->
		<view class="add-modal" v-if="showAddModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title elderly-text-large">添加健康提醒</text>
					<view class="close-btn elderly-pressable" @tap="closeAddModal">
						<text class="close-icon">✕</text>
					</view>
				</view>
				<view class="modal-body">
					<view class="form-group">
						<text class="form-label elderly-text">提醒类型</text>
						<view class="type-options">
							<view 
								class="type-option elderly-pressable" 
								v-for="type in reminderTypes" 
								:key="type.id"
								:class="{ active: selectedType === type.id }"
								@tap="selectType(type.id)"
							>
								<text class="type-icon">{{type.icon}}</text>
								<text class="type-name elderly-text">{{type.name}}</text>
							</view>
						</view>
					</view>
					
					<view class="form-group">
						<text class="form-label elderly-text">提醒时间</text>
						<picker 
							mode="time" 
							:value="reminderTime" 
							@change="onTimeChange"
						>
							<view class="time-picker elderly-pressable">
								<text class="time-text elderly-text">{{reminderTime}}</text>
								<text class="picker-icon">🕐</text>
							</view>
						</picker>
					</view>
					
					<view class="form-group">
						<text class="form-label elderly-text">提醒内容</text>
						<input 
							class="form-input" 
							v-model="reminderTitle" 
							placeholder="请输入提醒内容"
							placeholder-class="placeholder"
						/>
					</view>
					
					<view class="form-group">
						<text class="form-label elderly-text">详细描述（可选）</text>
						<textarea 
							class="form-textarea" 
							v-model="reminderDescription" 
							placeholder="添加详细描述..."
							placeholder-class="placeholder"
						></textarea>
					</view>
					
					<view class="form-group">
						<text class="form-label elderly-text">重复设置</text>
						<view class="repeat-options">
							<view 
								class="repeat-option elderly-pressable" 
								v-for="repeat in repeatOptions" 
								:key="repeat.id"
								:class="{ active: selectedRepeat === repeat.id }"
								@tap="selectRepeat(repeat.id)"
							>
								<text class="repeat-text elderly-text">{{repeat.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button class="save-btn elderly-button" @tap="saveReminder">保存提醒</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { storageManager } from '@/utils/storage-simple.js'
import { hapticLight, playSfx } from '@/utils/interaction.js'

export default {
	data() {
		return {
			refreshing: false,
			showAddModal: false,
			selectedType: 'medicine',
			reminderTime: '08:00',
			reminderTitle: '',
			reminderDescription: '',
			selectedRepeat: 'daily',
			
			// 今日提醒概览
			todayReminders: {
				completed: 3,
				total: 5,
				pending: 2
			},
			
			// 今日健康知识
			dailyKnowledge: {
				content: '老年人每天应保证7-8小时的睡眠，午休30分钟有助于恢复体力。睡前避免饮用咖啡、浓茶等刺激性饮料。',
				source: '健康养生专家'
			},
			
			// 提醒类型
			reminderTypes: [
				{ id: 'medicine', name: '服药', icon: '💊', color: 'linear-gradient(135deg, #4A90E2, #6DD400)' },
				{ id: 'measure', name: '测量', icon: '🩺', color: 'linear-gradient(135deg, #FF6B6B, #FF8E8E)' },
				{ id: 'exercise', name: '运动', icon: '🏃', color: 'linear-gradient(135deg, #6DD400, #4A90E2)' },
				{ id: 'meal', name: '用餐', icon: '🍽️', color: 'linear-gradient(135deg, #FFD166, #FF7E29)' },
				{ id: 'sleep', name: '睡眠', icon: '😴', color: 'linear-gradient(135deg, #9D4EDD, #4A90E2)' },
				{ id: 'other', name: '其他', icon: '📝', color: 'linear-gradient(135deg, #FF7E29, #FF6B6B)' }
			],
			
			// 重复选项
			repeatOptions: [
				{ id: 'once', name: '仅一次' },
				{ id: 'daily', name: '每天' },
				{ id: 'weekly', name: '每周' },
				{ id: 'monthly', name: '每月' }
			],
			
			// 提醒列表
			remindersList: [
				{
					id: 1,
					title: '服用降压药',
					description: '餐后30分钟服用，每次1片',
					time: '08:00',
					icon: '💊',
					color: 'linear-gradient(135deg, #4A90E2, #6DD400)',
					completed: true,
					tags: ['高血压', '餐后']
				},
				{
					id: 2,
					title: '测量血压',
					description: '静坐5分钟后测量，记录数据',
					time: '09:00',
					icon: '🩺',
					color: 'linear-gradient(135deg, #FF6B6B, #FF8E8E)',
					completed: true,
					tags: ['血压', '监测']
				},
				{
					id: 3,
					title: '晨练太极',
					description: '公园练习太极拳30分钟',
					time: '07:00',
					icon: '🏃',
					color: 'linear-gradient(135deg, #6DD400, #4A90E2)',
					completed: true,
					tags: ['运动', '太极']
				},
				{
					id: 4,
					title: '测量血糖',
					description: '餐前测量血糖值',
					time: '12:00',
					icon: '🩺',
					color: 'linear-gradient(135deg, #FF6B6B, #FF8E8E)',
					completed: false,
					tags: ['血糖', '餐前']
				},
				{
					id: 5,
					title: '午休时间',
					description: '午休30分钟，恢复体力',
					time: '14:00',
					icon: '😴',
					color: 'linear-gradient(135deg, #9D4EDD, #4A90E2)',
					completed: false,
					tags: ['休息', '午休']
				}
			]
		}
	},
	
	computed: {
		todayDate() {
			const now = new Date()
			return `${now.getMonth() + 1}月${now.getDate()}日`
		}
	},
	
	onLoad() {
		this.loadReminders()
	},
	
	methods: {
		// 加载提醒数据
		async loadReminders() {
			// 模拟加载数据
			console.log('加载健康提醒数据')
		},
		
		// 下拉刷新
		async handleRefresh() {
			this.refreshing = true
			hapticLight()
			await this.loadReminders()
			this.refreshing = false
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			})
		},
		
		// 添加提醒
		handleAddReminder() {
			hapticLight()
			this.showAddModal = true
		},
		
		// 选择提醒类型
		selectType(typeId) {
			hapticLight()
			this.selectedType = typeId
		},
		
		// 选择重复设置
		selectRepeat(repeatId) {
			hapticLight()
			this.selectedRepeat = repeatId
		},
		
		// 时间选择
		onTimeChange(e) {
			this.reminderTime = e.detail.value
		},
		
		// 切换提醒状态
		toggleReminder(reminder) {
			hapticLight()
			reminder.completed = !reminder.completed
			
			// 更新统计数据
			if (reminder.completed) {
				this.todayReminders.completed++
				this.todayReminders.pending--
			} else {
				this.todayReminders.completed--
				this.todayReminders.pending++
			}
			
			playSfx('success')
		},
		
		// 编辑提醒
		editReminder(reminder) {
			hapticLight()
			uni.showToast({
				title: '编辑功能开发中',
				icon: 'none'
			})
		},
		
		// 刷新健康知识
		refreshKnowledge() {
			hapticLight()
			const knowledgeList = [
				{
					content: '老年人每天应保证7-8小时的睡眠，午休30分钟有助于恢复体力。睡前避免饮用咖啡、浓茶等刺激性饮料。',
					source: '健康养生专家'
				},
				{
					content: '适量运动有助于保持身体健康，建议每天进行30分钟的中等强度运动，如散步、太极等。',
					source: '运动医学专家'
				},
				{
					content: '饮食要清淡，少油少盐，多吃蔬菜水果，适量摄入优质蛋白质，如鱼、蛋、豆制品等。',
					source: '营养学专家'
				}
			]
			
			const randomKnowledge = knowledgeList[Math.floor(Math.random() * knowledgeList.length)]
			this.dailyKnowledge = randomKnowledge
			
			uni.showToast({
				title: '知识已更新',
				icon: 'success'
			})
		},
		
		// 保存提醒
		saveReminder() {
			if (!this.reminderTitle.trim()) {
				uni.showToast({
					title: '请输入提醒内容',
					icon: 'none'
				})
				return
			}
			
			const selectedTypeInfo = this.reminderTypes.find(type => type.id === this.selectedType)
			
			const newReminder = {
				id: Date.now(),
				title: this.reminderTitle,
				description: this.reminderDescription,
				time: this.reminderTime,
				icon: selectedTypeInfo.icon,
				color: selectedTypeInfo.color,
				completed: false,
				tags: [selectedTypeInfo.name]
			}
			
			this.remindersList.push(newReminder)
			this.todayReminders.total++
			this.todayReminders.pending++
			
			this.closeAddModal()
			
			uni.showToast({
				title: '提醒添加成功',
				icon: 'success'
			})
		},
		
		// 关闭添加弹窗
		closeAddModal() {
			this.showAddModal = false
			this.reminderTitle = ''
			this.reminderDescription = ''
			this.selectedType = 'medicine'
			this.reminderTime = '08:00'
			this.selectedRepeat = 'daily'
		}
	}
}
</script>

<style scoped lang="scss">
.page {
	min-height: 100vh;
	background: $theme-bg;
}

/* 顶部导航栏 */
.topbar {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $elderly-spacing-base $elderly-spacing-lg;
	background: $theme-card;
	backdrop-filter: blur(20rpx);
	border-bottom: 2rpx solid $elderly-border;
	z-index: 100;
	box-shadow: $elderly-shadow-sm;
}

.title {
	font-size: $elderly-font-xl;
	font-weight: 700;
	color: $elderly-text-primary;
	letter-spacing: 2rpx;
}

.add-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background: $grad-sunrise;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.add-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 4rpx 12rpx rgba(255, 126, 41, 0.3);
}

.add-icon {
	font-size: $elderly-font-lg;
	color: #FFFFFF;
}

/* 主要内容区域 */
.main-content {
	height: calc(100vh - 200rpx);
	padding-bottom: 120rpx;
}

/* 概览卡片 */
.overview-card {
	background: $grad-sunrise;
	margin: $elderly-spacing-base;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	box-shadow: $elderly-shadow-base;
}

.overview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: $elderly-spacing-base;
}

.overview-title {
	color: #FFFFFF;
	font-weight: 700;
}

.overview-date {
	color: rgba(255, 255, 255, 0.9);
	font-size: $elderly-font-base;
}

.overview-stats {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.stat-item {
	text-align: center;
}

.stat-number {
	color: #FFFFFF;
	font-weight: 700;
	line-height: 1;
}

.stat-label {
	color: rgba(255, 255, 255, 0.9);
	font-size: $elderly-font-sm;
	margin-top: 4rpx;
}

.stat-divider {
	width: 2rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.3);
}

/* 健康知识卡片 */
.knowledge-card {
	background: $theme-card;
	margin: $elderly-spacing-base;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	box-shadow: $elderly-shadow-sm;
	transition: all 0.3s ease;
}

.knowledge-card:hover {
	transform: translateY(-2rpx);
	box-shadow: $elderly-shadow-base;
}

.knowledge-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: $elderly-spacing-base;
}

.knowledge-title {
	color: $elderly-text-primary;
	font-weight: 700;
}

.refresh-btn {
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;
	background: $theme-warm-gray;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.refresh-btn:hover {
	background: $grad-sunrise;
	transform: rotate(180deg);
}

.refresh-icon {
	font-size: $elderly-font-base;
}

.knowledge-content {
	color: $elderly-text-primary;
	line-height: 1.6;
	margin-bottom: $elderly-spacing-sm;
}

.knowledge-source {
	color: $elderly-text-secondary;
	font-size: $elderly-font-sm;
}

/* 提醒列表 */
.reminders-section {
	margin: $elderly-spacing-base;
}

.section-title {
	color: $elderly-text-primary;
	font-weight: 700;
	margin-bottom: $elderly-spacing-base;
}

.reminders-list {
	display: flex;
	flex-direction: column;
	gap: $elderly-spacing-sm;
}

.reminder-card {
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	box-shadow: $elderly-shadow-sm;
	transition: all 0.3s ease;
	border-left: 8rpx solid transparent;
}

.reminder-card.completed {
	opacity: 0.7;
	border-left-color: $theme-green;
}

.reminder-card:hover {
	transform: translateY(-2rpx);
	box-shadow: $elderly-shadow-base;
}

.reminder-header {
	display: flex;
	align-items: center;
	margin-bottom: $elderly-spacing-sm;
}

.reminder-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: $elderly-spacing-sm;
}

.icon {
	font-size: $elderly-font-lg;
}

.reminder-info {
	flex: 1;
}

.reminder-title {
	color: $elderly-text-primary;
	font-weight: 600;
	margin-bottom: 4rpx;
}

.reminder-time {
	color: $elderly-text-secondary;
	font-size: $elderly-font-sm;
}

.reminder-actions {
	display: flex;
	gap: $elderly-spacing-xs;
}

.action-btn {
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;
	background: $theme-warm-gray;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.action-btn:hover {
	background: $grad-sunrise;
	transform: scale(1.1);
}

.action-icon {
	font-size: $elderly-font-base;
}

.reminder-desc {
	color: $elderly-text-secondary;
	font-size: $elderly-font-sm;
	margin-bottom: $elderly-spacing-xs;
}

.reminder-tags {
	display: flex;
	gap: $elderly-spacing-xs;
	flex-wrap: wrap;
}

.tag {
	background: $theme-warm-gray;
	color: $elderly-text-secondary;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
	font-size: $elderly-font-xs;
}

/* 添加弹窗 */
.add-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	margin: $elderly-spacing-lg;
	width: 90%;
	max-width: 600rpx;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $elderly-spacing-lg;
	border-bottom: 2rpx solid $elderly-border;
}

.modal-title {
	color: $elderly-text-primary;
	font-weight: 700;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background: $theme-warm-gray;
	display: flex;
	align-items: center;
	justify-content: center;
}

.close-icon {
	font-size: $elderly-font-lg;
	color: $elderly-text-secondary;
}

.modal-body {
	flex: 1;
	padding: $elderly-spacing-lg;
	overflow-y: auto;
}

.form-group {
	margin-bottom: $elderly-spacing-lg;
}

.form-label {
	color: $elderly-text-primary;
	font-weight: 600;
	margin-bottom: $elderly-spacing-sm;
	display: block;
}

.type-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: $elderly-spacing-sm;
}

.type-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: $elderly-spacing-base;
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
	transition: all 0.2s ease;
	border: 2rpx solid transparent;
}

.type-option.active {
	background: $grad-sunrise;
	border-color: $theme-orange;
}

.type-icon {
	font-size: $elderly-font-lg;
	margin-bottom: 4rpx;
}

.type-name {
	font-size: $elderly-font-sm;
	font-weight: 600;
}

.time-picker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $elderly-spacing-base;
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
}

.time-text {
	color: $elderly-text-primary;
	font-size: $elderly-font-base;
}

.picker-icon {
	font-size: $elderly-font-base;
}

.form-input {
	width: 100%;
	height: 80rpx;
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
	padding: 0 $elderly-spacing-base;
	font-size: $elderly-font-base;
	color: $elderly-text-primary;
	border: none;
}

.form-textarea {
	width: 100%;
	min-height: 120rpx;
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
	padding: $elderly-spacing-base;
	font-size: $elderly-font-base;
	color: $elderly-text-primary;
	border: none;
	resize: none;
}

.placeholder {
	color: $elderly-text-secondary;
}

.repeat-options {
	display: flex;
	gap: $elderly-spacing-sm;
}

.repeat-option {
	flex: 1;
	padding: $elderly-spacing-sm $elderly-spacing-base;
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
	text-align: center;
	transition: all 0.2s ease;
	border: 2rpx solid transparent;
}

.repeat-option.active {
	background: $grad-sunrise;
	border-color: $theme-orange;
}

.repeat-text {
	font-size: $elderly-font-sm;
	font-weight: 600;
}

.modal-footer {
	padding: $elderly-spacing-lg;
	border-top: 2rpx solid $elderly-border;
}

.save-btn {
	width: 100%;
	background: $grad-sunrise;
	color: #FFFFFF;
	border: none;
	border-radius: $elderly-radius-base;
	padding: $elderly-spacing-base;
	font-size: $elderly-font-base;
	font-weight: 600;
}

/* 安全区域适配 */
.safe-area-top {
	padding-top: env(safe-area-inset-top);
}
</style>

